Introduction

By now you should be aware that React Native has several navigation libraries available that allow you to quickly set up routes for moving between screens in your app, rather than writing this functionality from scratch. In this reading, you’ll review some of the most common options and go over the process for setting up React Navigation in your app.

For more detailed information about React Navigation, review the following lesson items:

• Using the Stack Navigator in Module 4, Lesson 1 of the course React Native

• Creating and Configuring Native Stack Navigator in Module 4, Lesson 1 of the course React Native

• Moving between screens in Module 4, Lesson 2 of the course React Native

Overview of React Navigation

Navigation is an important aspect of any mobile application. React Native provides several ways to implement navigation in your app.

One of the most popular navigation libraries for React Native is React Navigation. React Navigation provides many navigators that manage the navigation state and allow the user to transition between screens.

The most commonly used navigators are the stack navigator, which allows the user to navigate through a stack of screens, and the tab navigator, which allows the user to switch between screens using tabs.

Setting up React Navigation

To use React Navigation in your React Native app, first, you need to install the library using npm or yarn . To do so, run the below command in your terminal:

npm install @react-navigation/native

After that, you will have to install extra dependencies required for Expo-managed projects. Execute the following command to install them:

npx Expo install react-native-screens react-native-safe-area-context

Later on, you need to wrap your whole application in a NavigatorContainer component, as described below:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Your app code */}</NavigationContainer>
  );
}

The next step is to set up the stack navigator in your app's root component. The stack navigator lives in its own library, so you have to incorporate it into your project by running the following command:

npm install @react-navigation/native-stack

You can then define the screens that will be part of your stack. The snippet below shows an example of a complete implementation of a simple stack navigator with one single screen, called HomeScreen . This example should serve as a reference to illustrate the building blocks necessary to set up your app navigation hierarchy.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

The code above produces the following output:

Conclusion

This reading just illustrated the basics of the library. React Navigation allows you to specify different navigation options for each screen, such as configuring the title and header as per your needs. It also provides a number of different customizations, such as the ability to define custom transitions and gestures.

You can also use the React Navigation API to programmatically navigate between screens and pass data between screens.